import React, { useCallback, useMemo, useRef } from 'react';

import { Icon, Tooltip } from 'antd';
import { history } from 'umi'

import IconFont from '@/components/IconFont';
import IconPro from '@/components/IconPro';
import LinkTo from '@/components/LinkTo';
import { download } from '@/containers/upload/utils';
import { useRequest } from '@/hooks';
import { DividerContainer } from '@/molecules';
import { deleteEntryContractTemplateConfig } from '@/pages/TurnoverSetting/EntrySetting/services';
import { onSuccessByDeleteFn } from '@/pages/TurnoverSetting/EntrySetting/util';

import ButtonPopconfirmAndToolTip from '../../components/ButtonPopconfirmAndToolTip';
import EntryLaborContractPreview from '../../EntryLaborContractSetting/EntryLaborContractPreview';
import styles from '../index.less';
import SettingTable from './SettingTable';

// 入职流程配置
const SectionEntryLaborContractSetting = props => {
    const { data, loading, onChange } = props;

    const { run: deleteRun, loading: deleteLoading } = useRequest(id => deleteEntryContractTemplateConfig(id), {
        manual: true,
        onSuccess: res => {
            onSuccessByDeleteFn(res, onChange);
        }
    });

    const handleEdit = record => {
        history.push({
            pathname: '/office/personnelManagement/onboardAndLeave/setting/entryLaborContract/edit',
            query: {
                id: record.id
            }
        });
    };

    const handleViewDetail = record => {
        history.push({
            pathname: '/office/personnelManagement/onboardAndLeave/setting/entryLaborContract/detail',
            query: { id: record.id },
            state: { tabRoute: true, tabRefresh: true }
        });
    };

    const handleAdd = useCallback(() => {
        history.push({
            pathname: '/office/personnelManagement/onboardAndLeave/setting/entryLaborContract/add'
            // state: { tabRoute: true, tabRefresh: true }
        });
    }, []);

    const previewRef = useRef();
    const handlePreview = useCallback(url => {
        previewRef.current.open(url);
    }, []);

    const columns = useMemo(
        () => [
            {
                title: '模板名称',
                dataIndex: 'settingName',
                render: (text, record) => (
                    <LinkTo isDefault onClick={() => handleViewDetail(record)}>
                        {text}
                    </LinkTo>
                )
            },
            {
                title: '适用行政机构',
                dataIndex: 'administrativeScopeNames',
                render: (text, record) => (record.isDefault === 1 ? '全集团' : text?.join('、'))
            },
            {
                title: '合同文件',
                dataIndex: 'resCombineBusinessResourceDtoList',
                render: (_, record) => {
                    const { resCombineBusinessResourceDtoList } = record;
                    return resCombineBusinessResourceDtoList.map(item => (
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                            <Icon style={{ color: '#FFA22D' }} type="file-text" theme="filled" />
                            &nbsp;
                            <a
                                className={styles.aClick}
                                onClick={() => {
                                    handlePreview(item.url);
                                }}
                            >
                                {item.originName}
                            </a>
                            &nbsp;
                            <IconPro.Button
                                icon="download"
                                dark
                                onClick={() => {
                                    download(item.url, item.originName);
                                }}
                            />
                        </div>
                    ));
                }
            },
            {
                title: '操作',
                key: 'operation',
                width: 100,
                render: (text, record) => (
                    <DividerContainer>
                        <Tooltip placement="top" title="编辑">
                            <IconFont
                                style={{ verticalAlign: 'middle' }}
                                onClick={() => handleEdit(record)}
                                icon="iconlistfunction_edit_icon_default"
                                isButton
                            />
                        </Tooltip>
                        <ButtonPopconfirmAndToolTip
                            title="你确定要删除这行内容吗？"
                            tooltipTitle={record.isDefault === 1 ? '默认配置，不可删除' : '删除'}
                            onConfirm={() => deleteRun(record.id)}
                            disabled={record.isDefault === 1}
                        >
                            <IconFont icon="iconlistfunction_delete_icon_default" isButton />
                        </ButtonPopconfirmAndToolTip>
                    </DividerContainer>
                )
            }
        ],
        [deleteRun, handlePreview]
    );

    return (
        <div {...props}>
            <div className={styles.sectionTitle}>劳动合同模板</div>
            <div className={styles.sectionDesc}>
                <p>定义各公司的劳动合同模板</p>
            </div>
            <SettingTable
                dataSource={data}
                loading={loading || deleteLoading}
                columns={columns}
                authCode
                onAdd={handleAdd}
            />
            <EntryLaborContractPreview ref={previewRef} />
        </div>
    );
};

export default SectionEntryLaborContractSetting;
